<template>
  <!-- 后台管理模块父组件左侧组件库 -->
  <div class="sliderassembly">
    <div>
      <!-- 可切换新增模块和我的模块 -->
      <div class="module-switcher">
        <div 
          class="switch-item" 
          :class="{ active: currentModule === 'newModule' }"
          @click="switchModule('newModule')"
        >
          新增模块
        </div>
        <div 
          class="switch-item" 
          :class="{ active: currentModule === 'myModule' }"
          @click="switchModule('myModule')"
        >
          我的模块
        </div>
      </div>
    </div>
    <!-- 新增模块 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item
        :title="items.title"
        :name="index + 1"
        v-for="(items, index) in datas"
        :key="index"
      >
        <div
          class="componList"
          draggable="true"
          @dragstart="drag($event)"
          @dragend="dragends($event)"
          :data-name="item.name"
          v-for="(item, ind) in items.comList"
          :key="ind"
        >
          <i class="iconfont" :class="item.icon" v-if="item.icon" />
          <van-icon :name="item.vanIcon" v-else />
          <p>{{ item.text }}</p>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 我的模块 -->
  </div>
</template>
<script>
export default {
  name: "sliderassembly",
  props: {
    pointer: Object,
  },
  data() {
    return {
      activeNames: [1, 2, 3] /* 侧边栏组件显示 */,
      currentModule: 'newModule', // 默认选中新增模块
      datas: [
        {
          title: "常用组件",
          comList: [
            // {
            //   text: '商品搜索',
            //   type: '1-1',
            //   icon: 'icon-wenbensousuo',
            //   name: 'commoditysearch',
            // },
            {
              text: "标题文本",
              type: "1-3",
              icon: "icon-biaotiwenben",
              name: "captiontext",
            },

            {
              text: "图片广告",
              type: "1-3",
              icon: "icon-tupian",
              name: "pictureads",
            },

            // {
            //   text: '公告',
            //   type: '1-7',
            //   icon: 'icon-gonggao',
            //   name: 'notice',
            // },

            // {
            //   text: '视频',
            //   type: '1-8',
            //   icon: 'icon-shipin',
            //   name: 'videoss',
            // },
            // {
            //   text: '富文本',
            //   type: '1-10',
            //   icon: 'icon-fuwenbenkuang',
            //   name: 'richtext',
            // },
            // {
            //   text: '辅助分割',
            //   type: '1-11',
            //   icon: 'icon-fuzhufenge',
            //   name: 'auxiliarysegmentation',
            // },

            // {
            //   text: '店铺信息',
            //   type: '1-12',
            //   icon: 'icon-dianpuxinxi',
            //   name: 'storeinformation',
            // },
            // {
            //   text: '单元格',
            //   type: '1-13',
            //   icon: 'icon-jurassic_insert-table',
            //   name: 'entertheshop',
            // },
            // {
            //   text: '社群涨粉',
            //   type: '1-14',
            //   icon: 'icon-tongxulu',
            //   name: 'communitypowder',
            // },
            /* {
              text: 'xxx',
              type: '1-17',
              icon: 'icon-yunying',
              name: ''
            }, */
            /* {
              text: 'xxx',
              type: '1-19',
              icon: 'icon-weibiaoti-_huaban',
              name: ''
            }, */
            /* {
              text: 'xxxx',
              type: '1-18',
              icon: 'icon-gexinghuatuijian',
              name: ''
            }, */
            // {
            //   text: '关注公众号',
            //   type: '1-15',
            //   icon: 'icon-guanzhugongzhonghao',
            //   name: 'follow',
            // },
            // {
            //   text: '悬浮',
            //   type: '1-16',
            //   icon: 'icon-l-xuanfu',
            //   name: 'suspension',
            // },
            // {
            //   text: '自定义模块',
            //   type: 'demo',
            //   icon: 'icon-zidingyimokuai',
            //   name: 'custommodule'
            // },
          ],
        },
        {
          title: "基础组件",
          comList: [
            {
              text: "魔方导航",
              type: "1-6",
              icon: "icon-mofangdaohang",
              name: "magiccube",
            },
            {
              text: "图文导航",
              type: "1-4",
              icon: "icon-tuwendaohang",
              name: "graphicnavigation",
            },
            // {
            //   text: '底部导航',
            //   type: '1-5',
            //   icon: 'icon-dibudaohang',
            //   name: 'tabBar',
            // },
          ],
        },
        {
          title: "排版组件",
          comList: [
            {
              text: "横向标签",
              type: "2-2",
              icon: "icon-biaoqian",
              name: "storenotecard",
            },
          ],
        },
        {
          title: "互动组件",
          comList: [
            // {
            //   text: '商品',
            //   type: '2-1',
            //   icon: 'icon-shangpin',
            //   name: 'listswitching',
            // },
            {
              text: "文章列表",
              type: "2-2",
              icon: "icon-wenzhangliebiao",
              name: "storenotecard",
            },
            // {
            //   text: '表单模块',
            //   type: '2-3',
            //   // vanIcon: 'icon-biaodanmokuai',
            //   icon: 'icon-biaodanmokuai',
            //   name: 'investigate',
            // }
          ],
        },
        {
          title: "互动组件",
          comList: [
            // {
            //   text: '商品',
            //   type: '2-1',
            //   icon: 'icon-shangpin',
            //   name: 'listswitching',
            // },
            {
              text: "文章列表",
              type: "2-2",
              icon: "icon-wenzhangliebiao",
              name: "storenotecard",
            },
            // {
            //   text: '表单模块',
            //   type: '2-3',
            //   // vanIcon: 'icon-biaodanmokuai',
            //   icon: 'icon-biaodanmokuai',
            //   name: 'investigate',
            // }
          ],
        },
        {
          title: "互动组件",
          comList: [
            // {
            //   text: '商品',
            //   type: '2-1',
            //   icon: 'icon-shangpin',
            //   name: 'listswitching',
            // },
            {
              text: "文章列表",
              type: "2-2",
              icon: "icon-wenzhangliebiao",
              name: "storenotecard",
            },
            // {
            //   text: '表单模块',
            //   type: '2-3',
            //   // vanIcon: 'icon-biaodanmokuai',
            //   icon: 'icon-biaodanmokuai',
            //   name: 'investigate',
            // }
          ],
        },
        {
          title: "互动组件",
          comList: [
            // {
            //   text: '商品',
            //   type: '2-1',
            //   icon: 'icon-shangpin',
            //   name: 'listswitching',
            // },
            {
              text: "文章列表",
              type: "2-2",
              icon: "icon-wenzhangliebiao",
              name: "storenotecard",
            },
            // {
            //   text: '表单模块',
            //   type: '2-3',
            //   // vanIcon: 'icon-biaodanmokuai',
            //   icon: 'icon-biaodanmokuai',
            //   name: 'investigate',
            // }
          ],
        },
        {
          title: "互动组件",
          comList: [
            // {
            //   text: '商品',
            //   type: '2-1',
            //   icon: 'icon-shangpin',
            //   name: 'listswitching',
            // },
            {
              text: "文章列表",
              type: "2-2",
              icon: "icon-wenzhangliebiao",
              name: "storenotecard",
            },
            // {
            //   text: '表单模块',
            //   type: '2-3',
            //   // vanIcon: 'icon-biaodanmokuai',
            //   icon: 'icon-biaodanmokuai',
            //   name: 'investigate',
            // }
          ],
        },
      ],
    };
  },
  methods: {
    /**
     * 切换模块
     * @param {String} moduleType 模块类型 'newModule' | 'myModule'
     */
    switchModule(moduleType) {
      this.currentModule = moduleType;
      // 这里可以根据需要加载不同模块的数据
      // 例如，当切换到'我的模块'时，可以调用API获取用户自定义的模块
      // 现在简单模拟一下数据切换效果
      if (moduleType === 'myModule') {
        // 实际项目中这里可能会调用API获取用户的模块数据
        console.log('切换到我的模块');
      } else {
        console.log('切换到新增模块');
      }
    },

    /**
     * 当用户开始拖动元素或选择文本时触发此事件
     *
     * @param {Object} event event对象
     */
    drag(event) {
      /* 开启穿透 */
      this.pointer.show = true;
      /* 传递参数 */
      event.dataTransfer.setData("componentName", event.target.dataset.name);
    },

    /**
     * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
     *
     * @param {Object} event event对象
     */
    dragends() {
      /* 关闭穿透 */
      this.pointer.show = false;
    },
  },
};
</script>
<style scoped lang="scss">
/* 组件 */
.sliderassembly {
  width: 275px;
  height: 100%;
  border: 2px solid red;
  overflow-y: scroll;
  border-right: 1px solid #ebedf0;
  box-sizing: border-box;
  padding: 0 12px;
  background: #fff;
  /* 滚动条 */
  &::-webkit-scrollbar {
    width: 1px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #155bd4;
  }
  ::v-deep.el-collapse-item__header,
  ::v-deep.el-collapse-item__wrap {
    border-bottom: 0 !important;
  }
  
  /* 模块切换导航栏 */
  .module-switcher {
    display: flex;
    margin: 16px 0;
    border-radius: 6px;
    overflow: hidden;
  }
  
  .switch-item {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #606266;
    position: relative;
  }
  
  .switch-item.active {
    color: #348cf8;
    font-weight: 500;
  }
  
  .switch-item:not(.active):hover {
    color: #348cf8;
  }
  
  /* 下划线动画效果 */
  .switch-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: #348cf8;
    border-radius: 1px;
  }
  
  /* 组件列表 */
  .componList {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    width: 80px;
    height: 88px;
    margin-bottom: 8px;
    align-items: center;
    cursor: all-scroll;
    transition: all 0.3s;
    &:hover {
      background: #155bd4;
      border-radius: 2px;
      font-weight: 700;
      i,
      p,
      span {
        color: #fff;
      }
    }
    /* 图标 */
    i {
      font-size: 32px;
      width: 32px;
      height: 32px;
      line-height: 32px;
      color: #b0a8a8;
      margin-top: 4px;
    }
    /* 标题 */
    p {
      font-size: 12px;
      color: #323233;
      margin-top: 4px;
    }
    /* 数量 */
    span {
      color: #7d7e80;
      margin-top: 4px;
      font-size: 10px;
    }
  }
}
</style>
